<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import FcDesigner from "./components/FcDesigner.vue";
import StandardForm from "./components/StandardForm.vue";

import { ref, onMounted } from "vue";
import type { TabsPaneContext } from "element-plus";

const activeName = ref(1);

const standardForm = ref(null);
const fcDesigner = ref(null);

function onSubmit() {
  let fcDesignerData = null;
  if (fcDesigner.value) {
    fcDesignerData = fcDesigner.value.getRuleData();
    console.log(fcDesignerData);
  }
}

function getDetails() {
  let data = [
    {
      type: "input",
      title: "输入框",
      $required: true,
      props: {
        formRow: 3,
        placeholder: "占位符",
        disabled: false,
      },
      value: "1",
    },
    {
      type: "input",
      title: "多行输入框",
      $required: true,
      props: {
        type: "textarea",
        disabled: true,
        formRow: 4,
        showWordLimit: true,
        placeholder: "占位",
      },
    },
    {
      type: "inputNumber",
      title: "计数器",
      $required: false,
      props: {
        formRow: 1,
        disabled: false,
      },
    },
    {
      type: "radio",
      title: "单选框",
      $required: false,
      options: [
        {
          label: "选项01",
          value: "1",
        },
        {
          label: "选项02",
          value: "2",
        },
        {
          label: "选项03",
          value: "3",
        },
      ],
      props: {
        formRow: 1,
        disabled: false,
      },
    },
    {
      type: "checkbox",
      title: "多选框",
      $required: false,
      options: [
        {
          label: "选项01",
          value: "1",
        },
        {
          label: "选项02",
          value: "2",
        },
        {
          label: "选项03",
          value: "3",
        },
      ],
      props: {
        formRow: 1,
        disabled: false,
      },
    },
    {
      type: "select",
      title: "选择器",
      $required: false,
      options: [
        {
          label: "选项01",
          value: "1",
        },
        {
          label: "选项02",
          value: "2",
        },
        {
          label: "选项03",
          value: "3",
        },
      ],
      props: {
        formRow: 1,
        disabled: false,
      },
    },
    {
      type: "switch",
      title: "开关",
      $required: false,
      props: {
        activeValue: true,
        inactiveValue: false,
        formRow: 1,
        disabled: false,
      },
    },
    {
      type: "timePicker",
      title: "时间",
      $required: false,
      props: {
        formRow: 1,
        disabled: false,
      },
    },
    {
      type: "datePicker",
      title: "日期",
      $required: false,
      props: {
        formRow: 1,
        disabled: false,
      },
    },
    {
      type: "datePicker",
      title: "日期区间",
      $required: false,
      props: {
        type: "datetimerange",
        formRow: 1,
        disabled: false,
      },
    },
    {
      type: "upload",
      title: "上传",
      $required: false,
      props: {
        action: "/",
        formRow: 1,
        disabled: false,
      },
    },
    {
      type: "fcEditor",
      title: "富文本框",
      $required: false,
      props: {
        formRow: 1,
        disabled: false,
      },
    },
  ];
  // 标准
  if (standardForm.value) {
    standardForm.value.setSubDataList(data);
  }
  // 自定义
  if (fcDesigner.value) {
    fcDesigner.value.setRuleData(data);
  }
}

onMounted(() => {
  getDetails();
});
</script>

<template>
  <div class="appBox">
    <div class="tabs">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="标准属性" :name="1"></el-tab-pane>
        <el-tab-pane label="自定义属性" :name="2"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="box">
      <HelloWorld v-if="false" />

      <StandardForm ref="standardForm" v-show="activeName == 1" />
      <FcDesigner ref="fcDesigner" v-show="activeName == 2" />
    </div>
    <div class="bottom">
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </div>
  </div>
</template>

<style scoped>
.appBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tabs {
  padding: 0 20px;
  /deep/ .el-tabs__header {
    margin-bottom: 0;
  }
}
.box {
  flex: 1;
}
.bottom {
  text-align: center;
}
</style>
